/**
 * @author W
 * @date 2020/8/31 22:18
 */
// 使用浏览器新API new IntersectionObserver() 实现图片的懒加载
(async function () {
    let imgData = await queryData();

    renderData();

    // 和图片数据与dom模板结合并渲染
    function renderData() {
        let columns = Array.from(document.querySelectorAll('.column'));
        // 获取列宽
        const colW = getStyle(columns[0], 'width');
        for (let i = 0; i < imgData.length; i++) {
            const item = imgData[i];
            // 因为每一列中的width是固定的，所以图片要等比例缩小：图片真实宽/高  = 列宽/ 高？
            item.calcHeight = colW / (item.width / item.height);
        }

        for (let i = 0; i < imgData.length; i = i + 3) {
            // 每次取三个，因为共有三列数据，每一列数据中放入一个
            let itemGroup = imgData.slice(i, i + 3);

            // 将图片数据按照计算后的高度降序排列（从大到小）
            itemGroup.sort(function (a, b) {
                return b.calcHeight - a.calcHeight
            })

            // 将每列按照自身渲染后的高度进行升序排列（从小到大）
            columns.sort(function (a, b) {
                return a.offsetHeight - b.offsetHeight
            })

            // 图片高度最大的放入列中总高度最大的，图片高度较大的放入列中总高度较大的，图片高度最小的放入列中总高度最小的，这样放入才有瀑布流的感觉
            itemGroup.forEach((item, index) => {
                let div = document.createElement('div')
                div.className = 'card';
                div.innerHTML = `<a href="${item.link}">
                      <div class="lazyImageBox" style="height:${item.calcHeight}px">
                          <img src="" alt="" data-image="${item.pic}" style="width:100%;height: 100%;opacity: 0">
                      </div>
                      <p>${item.title}</p>
                  </a>`
                columns[index].appendChild(div)
            })
        }
        // 等待渲染完dom后，开始监听图片的位置
        setTimeout(() => {
            initObserveImg()
        }, 200)
    }

    // 请求图片数据
    async function queryData() {
        return new Promise(((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.open('GET', './data.json', true);
            xhr.onload = function () {
                if (xhr.status === 200 && xhr.readyState === 4) {
                    resolve(xhr.response);
                } else {
                    reject(xhr.response)
                }
            }
            xhr.onerror = function (err) {
                reject(err)
            }
            xhr.send(null)
        }))
    }

    // 得到某个元素计算后的样式
    function getStyle(ele, attr) {
        let result = getComputedStyle(ele)[attr];
        let reg = /(em)|(rem)|(px)?$/i;
        if (reg.test(result)) return parseFloat(result);
        return result;
    }

    // 使用图片懒加载
    function initObserveImg() {
        wLazyImg.init({
            attr: "data-image",
            animate:true,
            threshold:[1],
            loaded:(event)=>{
                console.log(event)
            }
        })
    }
})()
